CSS @font-feature-valuesã®åãæ¢ããOpenTypeãã©ã³ãæ©èœã粟å¯ã«å¶åŸ¡ãWebãã¶ã€ã³ãšäžççãªã¢ã¯ã»ã·ããªãã£ã®ããã®ã¿ã€ãã°ã©ãã£ã匷åããŸãã
ã¿ã€ãã°ã©ãã£ã®å¯èœæ§ãè§£ãæŸã€ïŒCSS @font-feature-valuesç·åã¬ã€ã
Webãã¶ã€ã³ã®é åã«ãããŠãã¿ã€ãã°ã©ãã£ã¯ãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã圢æãããã©ã³ãã¢ã€ãã³ãã£ãã£ãäŒããäžã§æ¥µããŠéèŠãªåœ¹å²ãæãããŸããfont-familyãfont-sizeãfont-weightãšãã£ãåºæ¬çãªCSSãã©ã³ãããããã£ã¯åºæ¬çãªå¶åŸ¡ãæäŸããŸããã@font-feature-valuesã«ãŒã«ã¯é«åºŠãªã¿ã€ãã°ã©ãã£ã«ã¹ã¿ãã€ãºã®äžçãžã®æãéããŸãããã®ã«ãŒã«ã¯OpenTypeãã©ã³ãã®é ããå¯èœæ§ãè§£ãæŸã¡ãéçºè
ããã¶ã€ããŒãç¹å®ã®ãã©ã³ãæ©èœã埮調æŽããŠãçŸèгãå¯èªæ§ãã¢ã¯ã»ã·ããªãã£ãåäžãããããšãå¯èœã«ããŸãããã®ã¬ã€ãã§ã¯ã@font-feature-valuesã®è€éããæãäžãããã®æ§æãäœ¿çšæ³ããããŠå€æ§ãªã°ããŒãã«ã³ã³ããã¹ãã§ã®å®è·µçãªå¿çšãæ¢ããŸãã
OpenTypeæ©èœã®çè§£
@font-feature-valuesã®è©³çްã«å
¥ãåã«ãOpenTypeæ©èœã®åºæ¬æŠå¿µãçè§£ããããšãéèŠã§ããOpenTypeã¯ããã®å身ã§ããTrueTypeãPostScriptã®èœåãæ¡åŒµãããåºãæ¡çšãããŠãããã©ã³ããã©ãŒãããã§ããã°ãªãã®ã¬ã³ããªã³ã°ã«é¢ããæ§ã
ãªåŽé¢ãå¶åŸ¡ããè±å¯ãªæ©èœã»ãããå
èµããŠããã以äžã®ãããªãã®ãå«ãŸããŸãïŒ
- ååïŒãªã¬ãã£ïŒïŒ2ã€ä»¥äžã®æåãåäžã®ã°ãªãã«çµåããçŸèгãšå¯èªæ§ãåäžãããŸãïŒäŸïŒãfiãããflãïŒã
- 代æ¿ã°ãªãïŒç¹å®ã®æåã®ããªãšãŒã·ã§ã³ãæäŸããæäœçãªéžæãæèã«å¿ãã調æŽãå¯èœã«ããŸãã
- ã¹ã¿ã€ã«ã»ããïŒé¢é£ããæäœçããªãšãŒã·ã§ã³ãåäžã®ååã®äžã«ã°ã«ãŒãåãããã¶ã€ããŒãäžè²«ããçŸçåŠçã容æã«é©çšã§ããããã«ããŸãã
- æ°åã¹ã¿ã€ã«ïŒã©ã€ãã³ã°æ°åããªãŒã«ãã¹ã¿ã€ã«æ°åãããŒãã«çšæ°åãªã©ãç¹å®ã®ãŠãŒã¹ã±ãŒã¹ã«é©ããç°ãªãæ°åã¹ã¿ã€ã«ãæäŸããŸãã
- åæ°ïŒé©åãªååã忝ãåæ°ç·ã®ã°ãªãã§åæ°ãèªåçã«ãã©ãŒãããããŸãã
- ã¹ã¢ãŒã«ãã£ãã¿ã«ïŒå°æåã倧æåã®å°ããããŒãžã§ã³ãšããŠè¡šç€ºããŸãã
- æèäŸåã®ä»£æ¿ïŒåšå²ã®æåã«åºã¥ããŠã°ãªãã®åœ¢ç¶ã調æŽããå¯èªæ§ãšèŠèŠçãªèª¿åãé«ããŸãã
- ã¹ã¯ãã·ã¥ïŒç¹å®ã®ã°ãªãã«è¿œå ãããè£ é£Ÿçãªæ¡åŒµã§ãåªé ããšè¯ããããå ããŸãã
- ã«ãŒãã³ã°ïŒç¹å®ã®æåãã¢éã®ééã調æŽããèŠèŠçãªãã©ã³ã¹ãæ¹åããŸãã
ãããã®æ©èœã¯éåžžããã©ã³ããã¡ã€ã«èªäœã®äžã§å®çŸ©ãããŠããŸãã@font-feature-valuesã¯ããããã®æ©èœã«CSSããçŽæ¥ã¢ã¯ã»ã¹ãå¶åŸ¡ããæ¹æ³ãæäŸããã¿ã€ãã°ã©ãã£ãã¶ã€ã³ã«ãããŠæ¯é¡ã®ãªãæè»æ§ããããããŸãã
CSS @font-feature-valuesã®ç޹ä»
@font-feature-valuesã¢ããã«ãŒã«ã䜿çšãããšãç¹å®ã®OpenTypeæ©èœèšå®ã«èª¬æçãªååãå®çŸ©ã§ããŸããããã«ãããCSSã§ãã人éãèªã¿ãããååã䜿çšã§ããããã«ãªããã³ãŒãã®ä¿å®æ§ãšçè§£ãããããåäžããŸããåºæ¬çãªæ§æã¯ä»¥äžã®éãã§ãïŒ
@font-feature-values <font-family-name> {
<feature-tag-value> {
<feature-name>: <feature-value>
}
}
åæ§æèŠçŽ ãåè§£ããŠã¿ãŸãããïŒ
@font-feature-values: æ©èœå€ã®å®çŸ©ãéå§ããã¢ããã«ãŒã«ã§ãã<font-family-name>: ãããã®æ©èœå€ãé©çšããããã©ã³ããã¡ããªãŒã®ååã§ãïŒäŸïŒãMyCustomFontãããArialãïŒãããã«ãããå®çŸ©ãããæ©èœå€ãæå®ããããã©ã³ãã䜿çšããèŠçŽ ã«ã®ã¿é©çšãããããã«ãªããŸãã<feature-tag-value>: ç¹å®ã®OpenTypeæ©èœã¿ã°ã®å€ãå®çŸ©ãããããã¯ã§ãã<feature-tag>: OpenTypeæ©èœãèå¥ãã4æåã®ã¿ã°ã§ãïŒäŸïŒååã®ligaãã¹ã¢ãŒã«ãã£ãã¿ã«ã®smcpãæèäŸåã¹ã¯ãã·ã¥ã®cswhïŒããããã®ã¿ã°ã¯æšæºåãããŠãããOpenType仿§ã«ãã£ãŠå®çŸ©ãããŠããŸãããããã®ã¿ã°ã®å æ¬çãªãªã¹ãã¯ãOpenTypeã®ããã¥ã¡ã³ããæ§ã ãªãªã³ã©ã€ã³ãªãœãŒã¹ã§èŠã€ããããšãã§ããŸãã<feature-name>: OpenTypeæ©èœã®ç¹å®ã®å€ã«å²ãåœãŠã説æçãªååã§ããããã¯CSSã«ãŒã«ã§äœ¿çšããååã«ãªããŸããæå³ããããèŠããããååãéžã³ãŸãããã<feature-value>: OpenTypeæ©èœã®å®éã®å€ã§ããéåžžãããŒã«å€ã®æ©èœã§ã¯onãŸãã¯offãå€ã®ç¯å²ãåãå ¥ããæ©èœã§ã¯æ°å€ã«ãªããŸãã
å®è·µçãªäŸãšãŠãŒã¹ã±ãŒã¹
@font-feature-valuesã®åã瀺ãããã«ãããã€ãã®å®è·µçãªäŸãèããŠã¿ãŸãããïŒ
1. ä»»æååã®æå¹å
ä»»æååïŒDiscretionary ligaturesïŒã¯ãç¹å®ã®æåã®çµã¿åããã®çŸçé åãé«ããããšãã§ãããªãã·ã§ã³ã®ååã§ããããããæå¹ã«ããã«ã¯ã次ã®ããã«æ©èœå€ãå®çŸ©ã§ããŸãïŒ
@font-feature-values "MyCustomFont" {
@discretionary-ligatures {
common-ligatures: on;
}
}
.my-text {
font-family: "MyCustomFont";
font-variant-alternates: discretionary-ligatures;
}
ãã®äŸã§ã¯ãdligïŒä»»æååïŒOpenTypeæ©èœã«å¯ŸããŠcommon-ligaturesãšããååã®æ©èœå€ãå®çŸ©ããŸããããããŠãfont-variant-alternatesããããã£ã䜿çšããŠããã®æ©èœå€ã.my-textã¯ã©ã¹ã«é©çšããŸããæ³šæïŒå€ããã©ãŠã¶ã§ã¯font-variant-ligaturesããããã£ã®äœ¿çšãå¿
èŠãªå ŽåããããŸãããããã€åã«ãã©ãŠã¶ã®äºææ§ã確èªããå¿
èŠããããŸãã
2. ã¹ã¿ã€ã«ã»ããã®å¶åŸ¡
ã¹ã¿ã€ã«ã»ããã䜿çšãããšãæäœçãªããªãšãŒã·ã§ã³ã®ã³ã¬ã¯ã·ã§ã³ãããã¹ãã«é©çšã§ããŸããäŸãã°ãèŠåºããæ¬æããã¹ãã«ç¹å®ã®ã¹ã¿ã€ã«ã»ããã䜿çšãããå ŽåããããŸãã
@font-feature-values "MySerifFont" {
@stylistic-sets {
alternate-a: ss01;
elegant-numbers: ss02;
}
}
.heading {
font-family: "MySerifFont";
font-variant-alternates: stylistic(alternate-a);
}
.body-text {
font-family: "MySerifFont";
font-variant-alternates: stylistic(elegant-numbers);
}
ããã§ã¯ãalternate-aïŒss01ã«ãããã³ã°ïŒãšelegant-numbersïŒss02ã«ãããã³ã°ïŒã®2ã€ã®ã¹ã¿ã€ã«ã»ãããå®çŸ©ããŸããããããŠãfont-variant-alternatesã䜿çšããŠãããã®ã»ãããç°ãªãèŠçŽ ã«é©çšããŸããç¹å®ã®ã¹ã¿ã€ã«ã»ããã¿ã°ïŒss01ãss02ãªã©ïŒã¯ãã©ã³ãèªäœã®äžã§å®çŸ©ãããŠããŸããå©çšå¯èœãªã¹ã¿ã€ã«ã»ããã«ã€ããŠã¯ããã©ã³ãã®ããã¥ã¡ã³ããåç
§ããŠãã ããã
3. æ°åã¹ã¿ã€ã«ã®ã«ã¹ã¿ãã€ãº
OpenTypeãã©ã³ãã¯ãããŸããŸãªç®çã®ããã«ç°ãªãæ°åã¹ã¿ã€ã«ãæäŸããããšããããããŸããã©ã€ãã³ã°æ°åã¯éåžžã衚ããã£ãŒãã§äœ¿çšããããªãŒã«ãã¹ã¿ã€ã«æ°åã¯æ¬æããã¹ããšããèªç¶ã«èª¿åããŸãã
@font-feature-values "MyProFont" {
@styleset {
tabular-numbers: tnum;
proportional-oldstyle: pold;
}
}
.table-data {
font-family: "MyProFont";
font-variant-alternates: styleset(tabular-numbers);
}
.body-text {
font-family: "MyProFont";
font-variant-alternates: styleset(proportional-oldstyle);
}
ãã®äŸã§ã¯ãããŒãã«ããŒã¿çšã«tabular-numbersïŒtnumïŒããæ¬æããã¹ãçšã«proportional-oldstyleïŒpoldïŒãå®çŸ©ããå¯èªæ§ãšèŠèŠçãªäžè²«æ§ãé«ããŠããŸãã
4. è€æ°æ©èœã®çµã¿åãã
åäžã®font-variant-alternates宣èšå
ã§è€æ°ã®æ©èœãçµã¿åãããããšãã§ããŸãïŒ
@font-feature-values "MyComplexFont" {
@styleset {
historical-forms: hist;
contextual-alternates: calt;
}
@discretionary-ligatures {
rare-ligatures: dlig;
}
}
.special-text {
font-family: "MyComplexFont";
font-variant-alternates: styleset(historical-forms) discretionary-ligatures(rare-ligatures);
}
ããã«ãããè€æ°ã®OpenTypeæ©èœãåæã«é©çšããããšã§ãè€éãªã¿ã€ãã°ã©ãã£å¹æãå¯èœã«ãªããŸããé åºãéèŠã«ãªãå Žåãããããšã«æ³šæããŠãã ãããæãŸããçµæãåŸãããã«ã¯å®éšãéµãšãªããŸãã
font-variant-settingsã«ããæ©èœãžã®çŽæ¥ã¢ã¯ã»ã¹
@font-feature-valuesãšfont-variant-alternatesãé«ã¬ãã«ã®æœè±¡åãæäŸããäžæ¹ã§ãfont-variant-settingsããããã£ã¯4æåã®ã¿ã°ã䜿çšããŠOpenTypeæ©èœã«çŽæ¥ã¢ã¯ã»ã¹ã§ããŸãããã®ããããã£ã¯ãäºåã«å®çŸ©ãããfont-variant-alternatesããŒã¯ãŒãã§ã«ããŒãããŠããªãæ©èœãããã詳现ãªå¶åŸ¡ãå¿
èŠãªå Žåã«ç¹ã«äŸ¿å©ã§ãã
font-variant-settingsã®æ§æã¯æ¬¡ã®ãšããã§ãïŒ
font-variant-settings: "<feature-tag>" <value>, "<feature-tag>" <value>, ...;
äŸãã°ãã¹ã¢ãŒã«ãã£ãã¿ã«ãæå¹ã«ããã«ã¯ã次ã®ããã«äœ¿çšã§ããŸãïŒ
.small-caps-text {
font-family: "MyFont";
font-variant-settings: "smcp" 1;
}
ããã§ã"smcp" 1ã¯ãã©ãŠã¶ã«ã¹ã¢ãŒã«ãã£ãã¿ã«æ©èœãæå¹ã«ããããçŽæ¥æç€ºããŸããå€1ã¯éåžžããªã³ãã衚ãã0ã¯ããªããã衚ããŸãã
åäžã®å®£èšã§è€æ°ã®æ©èœèšå®ãçµã¿åãããããšãã§ããŸãïŒ
.advanced-text {
font-family: "MyFont";
font-variant-settings: "liga" 0, "cswh" 1, "calt" 1;
}
ããã¯æšæºååïŒligaïŒãç¡å¹ã«ããæèäŸåã¹ã¯ãã·ã¥ïŒcswhïŒãæå¹ã«ããæèäŸåã®ä»£æ¿ïŒcaltïŒãæå¹ã«ããŸãã
font-variant-settingsã®å©ç¹ïŒ
- çŽæ¥å¶åŸ¡ïŒåã ã®OpenTypeæ©èœã粟å¯ã«å¶åŸ¡ã§ããŸãã
- æè»æ§ïŒ
font-variant-alternatesã§ã«ããŒãããŠããªãæ©èœã«ã¢ã¯ã»ã¹ã§ããŸãã
font-variant-settingsã®æ¬ ç¹ïŒ
- å¯èªæ§ã®äœäžïŒçã®æ©èœã¿ã°ã䜿çšãããšãã³ãŒããèªã¿ã«ãããçè§£ãã«ãããªãå¯èœæ§ããããŸãã
- ä¿å®æ§ã®äœäžïŒãã©ã³ãå ã®æ©èœã¿ã°ã倿ŽããããšãCSSãçŽæ¥æŽæ°ããå¿ èŠããããŸãã
ãã¹ããã©ã¯ãã£ã¹ïŒå¯èªæ§ãšä¿å®æ§ãé«ããããã«ãå¯èœãªéã@font-feature-valuesãšfont-variant-alternatesã䜿çšããŠãã ãããfont-variant-settingsã¯ãçŽæ¥çãªæ©èœã¢ã¯ã»ã¹ãå¿
èŠãªå Žåã«éå®ããŠäœ¿çšããŸãã
ã¢ã¯ã»ã·ããªãã£ã«é¢ããèæ ®äºé
@font-feature-valuesã¯ã¿ã€ãã°ã©ãã£ã®èŠèŠçãªé
åã倧å¹
ã«åäžãããããšãã§ããŸãããã¢ã¯ã»ã·ããªãã£ãžã®åœ±é¿ãèæ
®ããããšãéèŠã§ããäžé©åã«é©çšãããæ©èœã¯ãé害ãæã€ãŠãŒã¶ãŒã®å¯èªæ§ããŠãŒã¶ããªãã£ã«æªåœ±é¿ãäžããå¯èœæ§ããããŸãã以äžã«ããã€ãã®éèŠãªèæ
®äºé
ãæããŸãïŒ
- ååïŒååã¯çŸèгãåäžãããããšãã§ããŸããã倱èªçã®ãŠãŒã¶ãŒãã¹ã¯ãªãŒã³ãªãŒããŒã«äŸåãããŠãŒã¶ãŒã«ãšã£ãŠã¯å¯èªæ§ã劚ããå¯èœæ§ããããŸããç¹ã«æ¬æããã¹ãã§ã®ä»»æååã®é床ãªäœ¿çšã¯é¿ããŠãã ãããå¿ èŠã«å¿ããŠååãç¡å¹ã«ãããªãã·ã§ã³ãæäŸããŸãã
- 代æ¿ã°ãªãïŒé床ã«è£ 食çãŸãã¯åç Žããªã°ãªãã䜿çšãããšãããã¹ããè§£èªãã«ãããªãå¯èœæ§ããããŸãã代æ¿ã°ãªããååãªã³ã³ãã©ã¹ããšå€èªæ§ãç¶æããŠããããšã確èªããŠãã ããã
- æèäŸåã®ä»£æ¿ïŒæèäŸåã®ä»£æ¿ã¯äžè¬çã«å¯èªæ§ãåäžãããŸãããèšèšãäžååãªä»£æ¿ã¯èŠèŠçãªäžæŽåãæ··ä¹±ãçãå¯èœæ§ããããŸããç°ãªãæåã®çµã¿åããã§æèäŸåã®ä»£æ¿ã培åºçã«ãã¹ãããŠãã ããã
- ã³ã³ãã©ã¹ãïŒäœ¿çšãããOpenTypeæ©èœã«é¢ããããããã¹ããšèæ¯ã®éã«ååãªã³ã³ãã©ã¹ãã確ä¿ããŠãã ãããããŒã«ã䜿çšããŠã³ã³ãã©ã¹ãæ¯ã確èªããWCAGã¢ã¯ã»ã·ããªãã£ã¬ã€ãã©ã€ã³ãæºãããŠãã ããã
- ãã¹ãïŒã¹ã¯ãªãŒã³ãªãŒããŒãªã©ã®æ¯æŽæè¡ã䜿çšããŠã¿ã€ãã°ã©ãã£ããã¹ãããããã¹ããé害ãæã€ãŠãŒã¶ãŒã«æ£ããè§£éãããäŒããããããšã確èªããŠãã ããã
åœéåãšããŒã«ãªãŒãŒã·ã§ã³
OpenTypeæ©èœã¯ã倿§ãªèšèªãæžèšäœç³»ããµããŒãããäžã§éèŠãªåœ¹å²ãæãããŸããå€ãã®ãã©ã³ãã«ã¯ãç¹å®ã®èšèªãå°ååãã«ç¹å¥ã«èšèšãããæ©èœãå«ãŸããŠããŸããäŸãã°ïŒ
- ã¢ã©ãã¢èªïŒã¢ã©ãã¢èªçšã®OpenTypeãã©ã³ãã«ã¯ãåèªå ã§ã®äœçœ®ã«åºã¥ããŠã°ãªãã調æŽããæèåœ¢ææ©èœãå«ãŸããŠããããšããããããŸãã
- ã€ã³ãç³»æåïŒããŒãŽã¡ããŒã¬ãªãŒããã³ã¬ã«æåãã¿ãã«æåãªã©ã®ã€ã³ãç³»æåçšã®ãã©ã³ãã¯ãçµååé³ãæ¯é³èšå·ãæ£ããåŠçããããã®è€éãªåœ¢æã«ãŒã«ãçµã¿èŸŒãã§ããŸãã
- CJKïŒäžåœèªãæ¥æ¬èªãéåœèªïŒïŒCJKèšèªçšã®OpenTypeãã©ã³ãã«ã¯ãå°åã®å¥œã¿ã«åºã¥ã代æ¿ã°ãªã圢åŒãæäœçããªãšãŒã·ã§ã³ã®æ©èœãå«ãŸããŠããããšããããããŸãã
å€èšèªãŠã§ããµã€ããèšèšããéã«ã¯ã察象èšèªãé©åã«ãµããŒããããã©ã³ããéžæããOpenTypeæ©èœãå©çšããŠæ£ããã¬ã³ããªã³ã°ãšé©åãªæäœçããªãšãŒã·ã§ã³ã確ä¿ããããšãäžå¯æ¬ ã§ãããã€ãã£ãã¹ããŒã«ãŒãã¿ã€ãã°ã©ãã£ã®å°éå®¶ãšçžè«ããã¿ã€ãã°ã©ãã£ãæåçã«é©åã§èšèªçã«æ£ç¢ºã§ããããšã確èªããŠãã ããã
以äžã¯ãç°ãªãèšèªã«ãããOpenTypeæ©èœã®éèŠæ§ã瀺ãäŸã§ãïŒ
- ã¢ã©ãã¢èªïŒå€ãã®ã¢ã©ãã¢èªãã©ã³ãã¯ãåèªå
ã®äœçœ®ã«åºã¥ããŠæåãé©åã«é£çµããããã«ãæèäŸåã®ä»£æ¿ïŒ
caltïŒã«å€§ããäŸåããŠããŸãããã®æ©èœãç¡å¹ã«ãããšãæåãéåãéåãã«ãªããèªããªãããã¹ãã«ãªãå¯èœæ§ããããŸãã - ãã³ãã£ãŒèªïŒããŒãŽã¡ããŒã¬ãªãŒïŒïŒå¿
é ååïŒ
rligïŒæ©èœã¯ãçµååé³ãæ£ããã¬ã³ããªã³ã°ããããã«äžå¯æ¬ ã§ããããããªããšãè€éãªåé³ã¯ã©ã¹ã¿ãåã ã®æåãšããŠè¡šç€ºãããããã¹ããèªã¿ã«ãããªããŸãã - æ¥æ¬èªïŒæ¥æ¬ã®ã¿ã€ãã°ã©ãã£ã§ã¯ãæäœçãªããªãšãŒã·ã§ã³ãæäŸããç°ãªãçŸçå奜ã«å¿ããããã«ãæåã®ä»£æ¿ã°ãªãããã°ãã°å©çšãããŸãã
font-variant-alternatesãfont-variant-settingsã䜿çšããŠããããã®ä»£æ¿ã°ãªããéžæã§ããŸãã
ãµããŒãããåèšèªã®ç¹å®ã®ã¿ã€ãã°ã©ãã£èŠä»¶ã調æ»ããããã«å¿ããŠãã©ã³ããšæ©èœãéžæããããšãå¿ããªãã§ãã ããããã€ãã£ãã¹ããŒã«ãŒãšã®ãã¹ãã¯ãæ£ç¢ºã§æåçã«é©åãªã¿ã€ãã°ã©ãã£ã確ä¿ããäžã§éåžžã«è²Žéã§ãã
ãã©ãŠã¶ã®äºææ§
@font-feature-valuesããã³é¢é£ããCSSããããã£ã®ãã©ãŠã¶ãµããŒãã¯æéãšãšãã«å€§å¹
ã«æ¹åãããŠããŸãããæ¬çªç°å¢ã§ãããã®æ©èœã«äŸåããåã«äºææ§ã確èªããããšãäžå¯æ¬ ã§ãã2023幎åŸåã®æç¹ã§ãã»ãšãã©ã®ã¢ãã³ãã©ãŠã¶ããããã®æ©èœããµããŒãããŠããŸããããã«ã¯ä»¥äžãå«ãŸããŸãïŒ
- Chrome
- Firefox
- Safari
- Edge
- Opera
ããããå€ããã©ãŠã¶ã§ã¯ãµããŒããäžè¶³ããŠããããäžè²«æ§ã®ãªãåäœã瀺ãããããå ŽåããããŸãããCan I use...ãã®ãããªãŠã§ããµã€ãã䜿çšããŠçŸåšã®äºææ§ç¶æ³ã確èªããå€ããã©ãŠã¶åãã®ãã©ãŒã«ããã¯ã¹ã¿ã€ã«ãæäŸããããšãæ€èšããŠãã ããããã£ãŒãã£ãŒã¯ãšãªïŒ@supportsïŒã䜿çšããŠãã©ãŠã¶ã®ãµããŒããæ€åºããããã«å¿ããŠã¹ã¿ã€ã«ãé©çšã§ããŸãïŒ
@supports (font-variant-alternates: discretionary-ligatures) {
.my-text {
font-variant-alternates: discretionary-ligatures;
}
}
ããã«ãããfont-variant-alternatesããããã£ã¯ãã©ãŠã¶ããµããŒãããŠããå Žåã«ã®ã¿é©çšãããŸãã
ãã¶ã€ã³ã·ã¹ãã ãšåå©çšå¯èœãªã¿ã€ãã°ã©ãã£
@font-feature-valuesã¯ãã¶ã€ã³ã·ã¹ãã ã«ã·ãŒã ã¬ã¹ã«çµ±åããåå©çšå¯èœã§äžè²«æ§ã®ããã¿ã€ãã°ã©ãã£ã¹ã¿ã€ã«ãäœæã§ããŸããæ©èœå€ãäžå
çã«å®çŸ©ããããšã§ãã¿ã€ãã°ã©ãã£åŠçããŠã§ããµã€ããã¢ããªã±ãŒã·ã§ã³å
šäœã§äžè²«ããŠé©çšãããããšãä¿èšŒã§ããŸããããã«ããããã©ã³ãã®äžè²«æ§ãä¿é²ãããã¡ã³ããã³ã¹ãç°¡çŽ åãããŸãã
以äžã¯ããã¶ã€ã³ã·ã¹ãã å ã§CSSãã©ã®ããã«æ§æãããã®äŸã§ãïŒ
/* typography.css */
@font-feature-values "MyBrandFont" {
@stylistic-sets {
brand-headline: ss01;
brand-body: ss02;
}
@discretionary-ligatures {
brand-ligatures: on;
}
}
/* components.css */
.headline {
font-family: "MyBrandFont";
font-variant-alternates: stylistic(brand-headline);
}
.body {
font-family: "MyBrandFont";
font-variant-alternates: stylistic(brand-body);
}
.brand-text {
font-family: "MyBrandFont";
font-variant-alternates: discretionary-ligatures(brand-ligatures);
}
ãã®äŸã§ã¯ã@font-feature-valuesã¯å¥ã®typography.cssãã¡ã€ã«ã§å®çŸ©ãããã³ã³ããŒãã³ãã®ã¹ã¿ã€ã«ã¯components.cssã§å®çŸ©ãããŠããŸãããã®é¢å¿ã®åé¢ã«ãããã³ãŒããããã¢ãžã¥ãŒã«åãããä¿å®ãããããªããŸãã
æ©èœå€ã«èª¬æçãªååïŒäŸïŒbrand-headlineãbrand-bodyïŒã䜿çšããããšã§ãã³ãŒããèªå·±ææžåãããä»ã®éçºè
ãçè§£ãããããªããŸããããã¯ãè€æ°ã®éçºè
ãåããããžã§ã¯ãã§äœæ¥ããå€§èŠæš¡ãªããŒã ã§ã¯ç¹ã«éèŠã§ãã
ãã©ã³ãã®èªã¿èŸŒã¿ãšããã©ãŒãã³ã¹
Webãã©ã³ãã䜿çšããå Žåãããã©ãŒãã³ã¹ã®ããã«ãã©ã³ãã®èªã¿èŸŒã¿ãæé©åããããšãéèŠã§ãã倧ããªãã©ã³ããã¡ã€ã«ã¯ããŒãžã®èªã¿èŸŒã¿æéã«å€§ããªåœ±é¿ãäžãããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã®äœäžã«ã€ãªããå¯èœæ§ããããŸãã以äžã¯ããã©ã³ãã®èªã¿èŸŒã¿ãæé©åããããã®ãã³ãã§ãïŒ
- WOFF2ã䜿çšããïŒWOFF2ã¯æãå¹ççãªãã©ã³ã圢åŒã§ãããæé«ã®å§çž®çãæäŸããŸããå¯èœãªéã䜿çšããŠãã ããã
- ãã©ã³ãããµãã»ããåããïŒãã©ã³ãããæåã®ãµãã»ããã®ã¿ãå¿ èŠãªå Žåã¯ããã©ã³ãããµãã»ããåããŠãã¡ã€ã«ãµã€ãºãåæžããããšãæ€èšããŠãã ãããFontForgeããªã³ã©ã€ã³ã®ãã©ã³ããµãã»ããåãµãŒãã¹ãªã©ã®ããŒã«ã圹ç«ã¡ãŸãã
font-displayã䜿çšããïŒfont-displayããããã£ã¯ããã©ã³ããèªã¿èŸŒãŸããŠããéã®è¡šç€ºæ¹æ³ãå¶åŸ¡ããŸããswapãoptionalã®ãããªå€ã䜿çšããŠãããã¹ãã®ã¬ã³ããªã³ã°ããããã¯ãããã®ãé¿ããŸãã- ãã©ã³ããããªããŒãããïŒ
<link rel="preload">ã¿ã°ã䜿çšããŠéèŠãªãã©ã³ããããªããŒããããã©ãŠã¶ã«ããŒãžã®èªã¿èŸŒã¿ããã»ã¹ã®æ©ã段éã§ããŠã³ããŒãããããæç€ºããŸãã - ãã©ã³ããµãŒãã¹ãæ€èšããïŒGoogle FontsãAdobe FontsãFontdeckãªã©ã®ãµãŒãã¹ãããã©ã³ãã®ãã¹ãã£ã³ã°ãšæé©åã代è¡ããŠãããŸãã
@font-feature-valuesã䜿çšããéãOpenTypeæ©èœãæå¹ã«ããããšã«ããããã©ãŒãã³ã¹ãžã®åœ±é¿ã¯äžè¬çã«ç¡èŠã§ããçšåºŠã§ããããšãèŠããŠãããŠãã ãããäž»ãªããã©ãŒãã³ã¹ã®æžå¿µã¯ãã©ã³ããã¡ã€ã«ãµã€ãºèªäœã§ãããã©ã³ãã®èªã¿èŸŒã¿ãæé©åããããšã«éäžããOpenTypeæ©èœãè³¢ã䜿çšããŠãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãåäžãããŸãããã
çµè«ïŒåè¶ããã¿ã€ãã°ã©ãã£ã®å®çŸ
@font-feature-valuesã«ãŒã«ãšé¢é£ããCSSããããã£ã¯ãOpenTypeãã©ã³ãã®æœåšèœåãæå€§éã«åŒãåºãããã®åŒ·åãªããŒã«ããããæäŸããŸããOpenTypeæ©èœãã¢ã¯ã»ã·ããªãã£ã®èæ
®äºé
ãåœéåã®èŠä»¶ããã©ãŠã¶ã®äºææ§ãçè§£ããããšã§ããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãåäžããããã©ã³ãã¢ã€ãã³ãã£ãã£ã匷åãããæŽç·ŽãããèŠèŠçã«é
åçãªã¿ã€ãã°ã©ãã£ãäœæã§ããŸãã@font-feature-valuesã®åãæŽ»çšããWebãã¶ã€ã³ãæ°ããªã¿ã€ãã°ã©ãã£ã®åè¶æ§ã®é«ã¿ãžãšåŒãäžããŸãããã
ç°ãªãèšèªãæåã®ã¿ã€ãã°ã©ãã£ã®ãã¥ã¢ã³ã¹ãæ éã«èæ ®ããããšã§ãèŠèŠçã«é åçãªã ãã§ãªããäžçäžã®èŠèŽè ã«ãšã£ãŠã¢ã¯ã»ã¹ãããããå æ¬çãªãŠã§ããµã€ããäœæã§ããŸããéèŠãªã®ã¯ãOpenTypeæ©èœãå¯èªæ§ããŠãŒã¶ããªãã£ã«äžããæœåšçãªåœ±é¿ã«çæãã倿§ãªãŠãŒã¶ãŒå±€ã§ã¿ã€ãã°ã©ãã£ã培åºçã«ãã¹ãããããšã§ãã